<template>
  <div
    style="
      background-color: #fff;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0px;
    "
  >
    <!-- 面包屑导航 -->
    <a-breadcrumb style="flex: 1">
      <a-breadcrumb-item>
        <a href="/admin">后台</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <a :href="title_path">{{ titleName }}</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>{{ subtitleName }}</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 用户信息及下拉菜单 -->
    <div class="user-info">
      <a-dropdown>
        <div class="user-dropdown">
          <!-- 用户图片 -->
          <a-avatar
            style="background-color: #1890ff; margin-right: 8px"
            :size="32"
          >
            {{ userInitial }}
          </a-avatar>
          <span class="username">{{ userName }}</span>
          <down-outlined style="margin-left: 8px; color: #666" />
        </div>

        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="settings">
              <template #icon>
                <setting-outlined />
              </template>
              个人设置
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="logout">
              <template #icon>
                <logout-outlined />
              </template>
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { message, Modal } from "ant-design-vue"; // 添加Modal导入
import {
  DownOutlined,
  SettingOutlined,
  LogoutOutlined,
} from "@ant-design/icons-vue";
import http from "../http/http";
import { useStore } from "vuex";
const store = useStore();
defineProps({
  titleName: String,
  subtitleName: String,
  title_path: String,
});
const username = localStorage.getItem("username");
// 用户信息（示例数据，建议从全局状态获取）
const userInfo = ref({
  name: `${username}`,
  username: `${username}`,
});

// 计算属性
const userName = computed(() => userInfo.value.name);
const userInitial = computed(() => userName.value.charAt(0));

const router = useRouter();

const handleMenuClick = ({ key }: { key: string }) => {
  switch (key) {
    case "settings":
      handleSettings();
      break;
    case "logout":
      handleLogout();
      break;
  }
};

const handleSettings = () => {
  router.push("/admin/sysset/personinfo");
};

const handleLogout = () => {
  Modal.confirm({
    title: "确定要退出登录吗？",
    content: "退出后将返回登录页面，需要重新登录",
    okText: "确认退出",
    cancelText: "取消",
    centered: true,
    onOk: async () => {
      try {
        const res = await http.get("/api/users/logout");
        console.log("操作成功：", res);
        message.success("退出成功");
        // 清除其他状态（如Vuex/Pinia中的用户信息）
        store.commit('CLEAR_USER_DATA')
        // 清除登录凭证
        // localStorage.removeItem("token");
        localStorage.clear();
        // 跳转登录页
        router.replace("/login");
        
        console.log("用户已退出登录");
      } catch (error) {
        console.log("操作失败", error);
        message.error("退出失败，请重试");
      }
    },
    // 可选：添加退出动画
    transitionName: "fade",
  });
};
</script>
  
  <style scoped>
.user-info {
  margin-left: auto;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.user-dropdown {
  display: flex;
  align-items: center;
  padding: 0px 12px;
  border-radius: 4px;
}

.user-dropdown:hover {
  background-color: #f5f5f5;
}

.username {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.ant-menu-item {
  min-width: 120px;
}
</style>